<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="app">
        <div class="tool">
            <!-- 输入框双向绑定 -->
            <input type="text" class="ipt" v-model="inputValue">
            <!-- 确定按钮监听点击 -->
            <div class="btn" @click="addItem">确定</div>
        </div>

        <div class="list">
            <!-- 数组遍历渲染 -->
            <!-- 删除第一步, 检测到点击事件 -->
            <!-- 删除第二步, 知道是哪个元素被点击 -->
            <div class="item" v-for="item in list" @click="removeItem(item)">
                {{item}}
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                inputValue: '',
                list: [
                    '苹果',
                    '香蕉',
                    '草莓'
                ]
            },
            methods: {
                addItem() {
                    console.log('可以监听到点击');
                    console.log(this.inputValue);
                    // 一旦监听到按钮点击, 获取输入框的值, 然后把值添加到数组中
                    // 我想知道现在的列表中是否已存在输入的值
                    // 默认认为没有重复
                    if(this.list.indexOf(this.inputValue) == -1) {
                        this.list.push(this.inputValue);
                    }

                    // 以下是比较直白但是比较复杂的写法
                    // var isExist = false
                    // 循环遍历整个数组
                    // for(var i = 0; i < this.list.length; i++) {
                    //     // 每当拿到一个元素, 就检查是否和用户输入的相同
                    //     if(this.list[i] == this.inputValue) {
                    //         // 有相同时候, 就将是否存在设置为true
                    //         isExist = true
                    //     }
                    // }

                    // if(isExist == false) {
                    //     // 如果没有重复, 就把输入的值添加到数组中
                    //     this.list.push(this.inputValue);
                    // }
                },
                removeItem(item) {
                    // console.log('点击了水果', item);
                    // // 1. 新建一个数组
                    // var newList = []
                    // // 2. 循环旧的数组, 将每个元素放入到新数组中
                    // for(var i = 0; i < this.list.length; i++) {
                    //     // 3. 因为是删除, 只有跟点击item不相同的才能放入
                    //     if(this.list[i] != item) {
                    //         newList.push(this.list[i])
                    //     }
                    // }
                    // // 4. 将最终的数组替换掉原来的数据
                    // this.list = newList
                    this.list = this.list.filter(function(item2){
                        return item2 != item
                    })
                }
            }
        })
    </script>
</body>
</html>